<template>
  <!-- 顶部活动图标 -->
  <img
    class="vw-100"
    src="https://image.zlketang.com/public/article/20230207/c359c72e8c9533ccb9a33f74dff4ccae.jpg"
  />
  <br />

  <div class="flex-wrap flex-justify-between flex-center-wrap w-1200 page-nave">
    <div class="flex flex-wrap">
      <!-- 左侧logo -->
      <img
        class="w-116 h-34 pr nav-logo"
        src="https://image.zlketang.com/public/news/images/new_official/other/black_logo.png"
      />

      <!-- 右侧导航 -->
      <div class="m-l-20 flex-wrap">
        <div
          :class="[
            'cu page-nav-item pr',
            active === item.id ? 'page-nav-item-active' : '',
          ]"
          v-for="item in list"
          :key="item.url"
          @click="goTo(item)"
        >
          {{ item.name }}

          <!-- 二级导航 -->
          <div class="pa bg-fff b-r-8 nav-two">
            <div
              class="nav-two-item"
              v-for="itey in item.children"
              :key="itey.url"
            >
              {{ itey.name }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧登录注册 -->
    <div>登录注册</div>
  </div>
</template>
<script setup>
import httpApi from "../api/admin.js";
const router = useRouter();
const route = useRoute();
const list = usePageHeader();
if (list.value.length == 0) {
  let res = await httpApi.get_page_nav_list();
  list.value = res.list || [];
}

function goTo(row) {
  let { url } = row;
  router.push(url);
}

// 获取当前路由信息
const active = computed(() => {
  let obj = list.value.find((item) => item.url == route.path);
  if (obj) {
    return obj.id;
  }
  return "";
});
</script>

<style scoped>
.page-nave {
  margin: 0 auto;
  height: 74px;
}
.page-nav-item {
  margin-right: 20px;
  font-weight: 500;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
}
.page-nav-item:hover .nav-two {
  display: block;
}
.page-nav-item-active {
  font-weight: 550;
  font-size: 18;
}

.nav-two {
  font-weight: 500;
  display: none;
  position: absolute;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
  left: 50%;
  transform: translateX(-50%);
}

.nav-two-item {
  text-align: center;
  white-space: nowrap;
  padding: 5px 10px;
  color: #666;
}
</style>
